<template>
    <div class="sc_login_bg">
       <div style="width:1200px; position: absolute;left: 50%; margin-left: -600px; margin-top:100px">
           
            <div class="sc_login_from">
                <div style="position: absolute;top:110px;left:67%;font-weight:bold;font-size:30px;text-align:center;font-family:微软雅黑;color:#333333;">权限管理系统</div>
                    <a-form id="formLogin" ref="formLogin" :form="form" @submit="handleSubmit">
                        <a-form-item>
                            <a-input size="large" type="text" placeholder="账号" v-decorator="['accountNo',{ rules: [{ required: true, message: '请输入账号' }], validateTrigger: 'change' },]" >
                                <template #prefix>
                                    <a-icon type="user" />
                                </template>
                            </a-input>
                        </a-form-item>
                        <a-form-item>
                            
                            <a-input-password size="large" placeholder="密码" v-decorator="['empPwd',{ rules: [{ required: true, message: '请输入密码' }], validateTrigger: 'blur' },]">
                                <template #prefix>
                                    <a-icon type="lock" />
                                </template>
                            </a-input-password>
                        </a-form-item>

                        <a-form-item v-if="defaultSettings.showIdentifyCode">
                            <a-row>
                                <a-col span="16">
                                    <a-input size="large" type="text" placeholder="验证码" v-decorator="['validateCode',{ rules: [{ required: true, message: '请输入验证码' }], validateTrigger: 'change' },]" >
                                    </a-input>
                                </a-col>
                                <a-col span="8">
                                    <div @click="refreshCode">
                                        <SIdentify :identifyCode="identifyCode" :contentHeight="45"></SIdentify>
                                    </div>
                                    
                                </a-col>
                            </a-row>
                        </a-form-item>

                        <a-form-item style="margin-top: 24px">
                            <a-button
                                block
                                size="large"
                                type="primary"
                                htmlType="submit"
                                :loading="state.loginBtn"
                                :disabled="state.loginBtn"
                                >登陆</a-button
                            >
                        </a-form-item>
                    </a-form>
        </div>

       </div>
        
        <div class="sc_login_foot">
            <!-- <p>本系统由 河南易创慧联科技有限公司 提供技术支持</p> -->
        </div>
    </div>
</template>

<script>
import md5 from 'md5'
import { login,generateKey } from '@/api/login'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import JSEncrypt from 'jsencrypt'
import defaultSettings from '@/config/defaultSettings'
import SIdentify from '@/components/lt/SIdentify'

export default {
    components: {
        SIdentify
    },
    data() {
        return {
            loginBtn: false,
            // login type: 0 email, 1 username, 2 telephone
            loginType: 0,
            isLoginError: false,
            requiredTwoStepCaptcha: false,
            stepCaptchaVisible: false,
            form: this.$form.createForm(this),
            state: {
                time: 60,
                loginBtn: false,
                loginType: 0,
                smsSendBtn: false,
            },
            defaultSettings,
            identifyCodes: "1234567890",
            identifyCode:''
        }
    },
    created() {
        this.refreshCode()
    },
    methods: {
        handleSubmit(e) {
            e.preventDefault()
            const {form: { validateFields },state,Login,} = this

            this.form.validateFields((err, values) => {
                if(this.defaultSettings.showIdentifyCode){
                    //判断验证码是否正确
                    if(values.validateCode!=this.identifyCode){
                        this.$message.warning("验证码错误")
                        state.loginBtn = false
                        return false
                    }
                }

                if (!err) {
                    state.loginBtn = true
                    let loginParams = Object.assign({}, values)

                    //先获取密钥
                    generateKey().then((res)=>{
                        if(!res.success || !res.message){
                            this.$message.warning("密钥获取失败")
                            state.loginBtn = false
                        }
                        let encryptor = new JSEncrypt()
                        encryptor.setPublicKey(res.message)
                        loginParams.empPwd = encryptor.encrypt(loginParams.empPwd)
                        login(loginParams)
                            .then((res) => this.loginSuccess(res))
                            .catch((err) => this.requestFailed(err))
                            .finally(() => {state.loginBtn = false})
                    }).finally(() => {state.loginBtn = false})

                    
                } else {
                    state.loginBtn = false
                }
            })
        },

        loginSuccess(res) {
            if (res.success) {
                sessionStorage.setItem(ACCESS_TOKEN, res.result.token)
                this.refreshCode()
                this.$router.push({ path: '/' })
            } else {
                this.$notification.error({ message: '系统提示', description: res.message })
            }

            this.isLoginError = false
        },
        requestFailed(err) {
            this.isLoginError = true
            this.$notification['error']({
                message: '错误',
                description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
                duration: 4,
            })
        },
        randomNum(min, max) {
            return Math.floor(Math.random() * (max - min) + min);
        },
        refreshCode() {
            this.identifyCode = "";
            this.makeCode(this.identifyCodes, 4);
        },
        makeCode(o, l) {
            for (let i = 0; i <l; i++) {
                this.identifyCode += this.identifyCodes[
                    this.randomNum(0, this.identifyCodes.length)
                ];
            }
            // console.log(this.identifyCode);
        }
    },
}
</script>

<style scoped>
   .sc_login_bg{height:100vh; padding:0; margin:0;background:url(../img/bg.png) no-repeat;background-size: 100% 100%;}
    .sc_login_content{position: relative;z-index: 10000;width:1200px;margin: 0 auto;}
    .sc_login_from{width: 40%;margin: 10% 55% ; padding: 60px 60px 60px 60px;border-radius: 10px; }
    .sc_login_foot{ color:#d9eef7; text-align:center; font-size:14px; font-family: "微软雅黑";position: absolute; bottom: 10px;width: 100%;text-align: center;}

    ::v-deep .ant-input{
        background-color: #F8F8F8 !important;
        color: #000000 !important;
        height: 50px !important;
        border:none;
        border-radius: 20px; 
    }
    ::v-deep .ant-btn {
        color: #ffffff !important;
        background-color: #0977AF !important;
        border-color:#0977AF !important;
        height: 50px !important;
        border-radius: 20px; 
    }
    ::v-deep .ant-form-item{
        margin-top:20px !important;
    }
</style>
